import React from 'react'
import Slider from "react-slick";
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';


import prev_button from './img/prev_button.png'
import next_button from './img/next_button.png'
import {WeaTools} from "ecCom";

function SamplePrevArrow(props) {
    const {className,style,onClick,id} = props
    return (
        <img src={prev_button} className={`${className} custom-element-view-pre-arrow-${id}`} controls style={{...style}} onClick={onClick}
             ref={(ref)=>{
                 if(window.elementFollowHideDoms && window.elementFollowHideDoms[id]){
                     window.elementFollowHideDoms[id].push(ref)
                 }else if(!window.elementFollowHideDoms){
                     window.elementFollowHideDoms = {}
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }else{

                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }
             }}
        />
    )
}

function SampleNextArrow(props) {
    const {className,style,onClick,id} = props
    return (
        <img controls src={next_button} className={`${className} custom-element-view-next-arrow-${id}`} style={{...style}} onClick={onClick}
             ref={(ref)=>{
                 if(window.elementFollowHideDoms && window.elementFollowHideDoms[id]){
                     window.elementFollowHideDoms[id].push(ref)
                 }else if(!window.elementFollowHideDoms){
                     window.elementFollowHideDoms = {}
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }else{
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }
             }}
        />
    )
}

export default class ContainerViewExtend extends React.Component{
    handlerSliderOnLoad = (ref)=>{
        const {data} = this.props
        const {id}  = data
        const tempDom = $(ref).find('.slick-dots')
        if(tempDom.length > 0){
            if(window.elementFollowHideDoms && window.elementFollowHideDoms[id]){
                window.elementFollowHideDoms[id].push(tempDom[0])
            }else if(!window.elementFollowHideDoms){

                window.elementFollowHideDoms = {}
                window.elementFollowHideDoms[id] = []
                window.elementFollowHideDoms[id].push(tempDom[0])
            }else{
                window.elementFollowHideDoms[id] = []
                window.elementFollowHideDoms[id].push(tempDom[0])
            }
        }
    }

    //自动播放
    videoRef = (obj) => {
        if(obj!=null){
            obj.play();
        }
    }

    //关闭自动播放 让video暂停
    vidRef = (obj) => {
        if(obj!=null){
            obj.pause();
        }

    }
    
    render(){
        const {data,tabId} = this.props
        const {id,setting,items}  = data
        const {showWay,showNum,height,isMultilineDisplay,isAutoHeight,layoutType,sliderType,isHasSliderArrow,sliderSpeed,isAutoPlay,titleFontSize} = setting
        let content = null
        let width = $('#divid').width()
        let viewerVideos = null
        if(items.length > 0){
            let height = setting.height
            let tabConentHeight = $(`#tabcontant_${id}`).height()
            let ItemContainerHeight
            let slidesToShow_h

            if(showWay == '1'){
                content = (
                    <div className="img-view-extend" style={{'text-align':'center',height: '100%'}}>
                        <div style={{display: 'inline-block','vertical-align':'middle',position:'relative'}}>
                            <video muted  height={isAutoHeight == '0' ? height : 'auto'} ref={isAutoPlay == '1'? this.videoRef : this.vidRef}
                                   style={{display:'inline-block',width: '100%'}} controls disablePictureInPicture="true" controlsList="nodownload" src={items[0].setting.video}/>
                        </div>
                        <div className="middle-box"></div>
                    </div>
                )
                viewerVideos = (
                    <ul id={`images-${id}`}>
                        <li><video className={`image-item-icon-0`} controls  disablePictureInPicture="true" controlsList="nodownload" src={items[0].setting.video}/></li>
                    </ul>
                )
            }else if(showWay == '2'&& isMultilineDisplay == '0'){//多个视频单行（单行多个视频/单行单个视频）
                const settings = {
                    slidesToShow: parseInt(showNum),
                    dots: false,
                    infinite: true,
                    autoplay: false,
                    prevArrow : <SamplePrevArrow ecId={`${this && this.props && this.props.ecId || ''}_SamplePrevArrow@zwnf7l`} id={id}/>,
                    nextArrow : <SampleNextArrow ecId={`${this && this.props && this.props.ecId || ''}_SampleNextArrow@8ngefb`} id={id}/>
                };
                if(isHasSliderArrow == '1'){
                    settings.arrows = true
                }else if(isHasSliderArrow == '0'){
                    settings.arrows = false
                }
                if(sliderType && sliderType != '1'){
                    settings.autoplay = true
                    settings.autoplaySpeed = sliderSpeed
                    if(sliderType == '3' || sliderType == '4'){
                        settings.rtl = true
                    }
                }else{
                    settings.autoplay = false
                }
                if(items.length>=showNum){
                    content = (

                        <div className="img-view-extend">
                            <div className="middle-container" ref={(ref)=>{this.handlerSliderOnLoad(ref)}}>
                                <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@xktebq`} {...settings}>
                                    {
                                        items.map((item,index)=>{
                                            return (
                                                <div>
                                                    <div style={{position: 'relative', margin: '0 auto', marginLeft: '10px', marginRight: '10px'}}>
                                                        <div className="img-item" style={{height:isAutoHeight == '0' ? ItemContainerHeight : 'auto'}} >
                                                            <div className="img-item-content" style={{height: isAutoHeight == '0' ? height : 'auto'}} >
                                                                <video className="img-item-icon" style={{height: isAutoHeight == '0' ? '100%' : 'auto'}} controls disablePictureInPicture="true" controlsList="nodownload" src={item.setting.video}/>


                                                            </div>
                                                            <div className="middle-box"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }

                                </Slider>
                                }

                            </div>
                            <div className="middle-box"></div>
                        </div>

                    )
                }else{
                    content = (
                        <div className="img-view-extend">
                            <div className="middle-container" ref={(ref)=>{this.handlerSliderOnLoad(ref)}}>
                                {
                                    (
                                        items.map((item,index)=>{
                                            return (
                                                <div style={{float: 'left',marginTop:'10px',marginLeft:'15px',width: parseInt((width - showNum * 15)/showNum)+ 'px',display: 'inline-block'}}>
                                                    <div className="img-item" style={{height: isAutoHeight == '0' ? ItemContainerHeight : 'auto'}}>
                                                        <div className="img-item-content" style={{height: isAutoHeight == '0' ? height : 'auto'}} >
                                                            <video className="img-item-icon" style={{height: isAutoHeight == '0' ? '100%' : 'auto'}} controls disablePictureInPicture="true" controlsList="nodownload" src={item.setting.video}/>

                                                        </div>
                                                        <div className="middle-box"></div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    )
                                }

                            </div>
                            <div className="middle-box"></div>
                        </div>
                    )
                }


                viewerVideos = (
                    <ul id={`images-${id}`}>
                        {
                            items.map((item,index)=>{
                                return (
                                    <li><video  className={`image-item-icon-${index}`} controls disablePictureInPicture="true" controlsList="nodownload" src={item.setting.video} /></li>
                                )
                            })
                        }
                    </ul>
                )


            } else if(showWay == '2'&& isMultilineDisplay == '1'){//多个视频多行显示
                const settings = {
                    pauseOnHover: true,
                    slidesToShow:slidesToShow_h,
                    prevArrow : <SamplePrevArrow ecId={`${this && this.props && this.props.ecId || ''}_SamplePrevArrow@dfmotl`} id={id}/>,
                    nextArrow : <SampleNextArrow ecId={`${this && this.props && this.props.ecId || ''}_SampleNextArrow@7niua4`} id={id}/>
                };
                if(isHasSliderArrow == '1'){
                    settings.arrows = true
                }else if(isHasSliderArrow == '0'){
                    settings.arrows = false
                }
                if(sliderType && sliderType != '1'){
                    settings.autoplay = true
                    settings.autoplaySpeed = sliderSpeed
                    if(sliderType == '3' || sliderType == '4'){
                        settings.rtl = true
                    }
                }else{
                    settings.autoplay = false
                }
                content = (
                    <div className="img-view-extend">
                        <div className="middle-container" ref={(ref)=>{this.handlerSliderOnLoad(ref)}}>
                            {
                                ( items.length > slidesToShow_h) ? (
                                    <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@6cpvov`} {...settings}>
                                        {
                                            items.map((item,index)=>{
                                                return (
                                                    <div style={{outline:'none'}}>
                                                            <div className="img-item" style={{height:isAutoHeight == '0' ? ItemContainerHeight : 'auto'}} >
                                                                <div className="img-item-content" style={{height: isAutoHeight == '0' ? height : 'auto'}} >
                                                                    <video className="img-item-icon" style={{height: isAutoHeight == '0' ? '100%' : 'auto'}} controlsList="nodownload" disablePictureInPicture="true" controls src={item.setting.video}/>


                                                                </div>
                                                                <div className="middle-box"></div>
                                                            </div>
                                                        </div>
                                                )
                                            })
                                        }

                                    </Slider>
                                ) : (
                                    items.map((item,index)=>{
                                        return (
                                            <div style={{float: 'left',marginTop:'10px',marginLeft:'5px',width: parseInt((width - showNum * 25)/showNum)+ 'px',display: 'inline-block'}}>
                                                <div className="img-item" style={{height: isAutoHeight == '0' ? ItemContainerHeight : 'auto'}}>
                                                    <div className="img-item-content" style={{height: isAutoHeight == '0' ? height : 'auto'}} >
                                                        <video className="img-item-icon" style={{height: isAutoHeight == '0' ? '100%' : 'auto'}} controls disablePictureInPicture="true" controlsList="nodownload" src={item.setting.video}/>

                                                    </div>
                                                    <div className="middle-box"></div>
                                                </div>
                                            </div>
                                        )
                                    })
                                )
                            }

                        </div>
                        <div className="middle-box"></div>
                    </div>
                )

                viewerVideos = (
                    <ul id={`images-${id}`}>
                        {
                            items.map((item,index)=>{
                                return (
                                    <li><video  className={`image-item-icon-${index}`} controls disablePictureInPicture="true" controlsList="nodownload" src={item.setting.video} /></li>
                                )
                            })
                        }
                    </ul>
                )
            }
        }




        return (
            <div id = "divid" style={{height:'100%'}}>
                {content}
                <div style={{display:'none'}}>
                    <video id={`image-${id}`} controls disablePictureInPicture="true" controlsList="nodownload"/>
                </div>
                <div style={{display:'none'}} onLoad={()=>{
                    this.viewer = new Viewer(document.getElementById(`image-${id}`), {
                        viewed() {
                            viewer.zoomTo(1);
                        },
                        // title: [4, (image, imageData) =>`${image.alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`]
                    })
                    let gallery = new Viewer(document.getElementById(`images-${id}`))
                }}>
                    {
                        viewerVideos
                    }
                </div>


            </div>
        )
    }
}